<%-- 
    Document   : principal
    Created on : 07/11/2012, 01:21:57 PM
    Author     : Izhar Gamaliel Hernandez Cruz
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@ taglib uri="/struts-tags" prefix="s"%>

<html>
<head>



	
<script type="text/javascript">
	$.fn.pageMe = function(opts){
	    var $this = this,
	        defaults = {
	            perPage: 7,
	            showPrevNext: false,
	            hidePageNumbers: false
	        },
	        settings = $.extend(defaults, opts);
	    
	    var listElement = $this;
	    var perPage = settings.perPage; 
	    var children = listElement.children();
	    var pager = $('.pager');
	    
	    if (typeof settings.childSelector!="undefined") {
	        children = listElement.find(settings.childSelector);
	    }
	    
	    if (typeof settings.pagerSelector!="undefined") {
	        pager = $(settings.pagerSelector);
	    }
	    
	    var numItems = children.size();
	    var numPages = Math.ceil(numItems/perPage);

	    pager.data("curr",0);
	    
	    if (settings.showPrevNext){
	        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
	    }
	    
	    var curr = 0;
	    while(numPages > curr && (settings.hidePageNumbers==false)){
	        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
	        curr++;
	    }
	    
	    if (settings.showPrevNext){
	        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
	    }
	    
	    pager.find('.page_link:first').addClass('active');
	    pager.find('.prev_link').hide();
	    if (numPages<=1) {
	        pager.find('.next_link').hide();
	    }
	  	pager.children().eq(1).addClass("active");
	    
	    children.hide();
	    children.slice(0, perPage).show();
	    
	    pager.find('li .page_link').click(function(){
	        var clickedPage = $(this).html().valueOf()-1;
	        goTo(clickedPage,perPage);
	        return false;
	    });
	    pager.find('li .prev_link').click(function(){
	        previous();
	        return false;
	    });
	    pager.find('li .next_link').click(function(){
	        next();
	        return false;
	    });
	    
	    function previous(){
	        var goToPage = parseInt(pager.data("curr")) - 1;
	        goTo(goToPage);
	    }
	     
	    function next(){
	        goToPage = parseInt(pager.data("curr")) + 1;
	        goTo(goToPage);
	    }
	    
	    function goTo(page){
	        var startAt = page * perPage,
	            endOn = startAt + perPage;
	        
	        children.css('display','none').slice(startAt, endOn).show();
	        
	        if (page>=1) {
	            pager.find('.prev_link').show();
	        }
	        else {
	            pager.find('.prev_link').hide();
	        }
	        
	        if (page<(numPages-1)) {
	            pager.find('.next_link').show();
	        }
	        else {
	            pager.find('.next_link').hide();
	        }
	        
	        pager.data("curr",page);
	      	pager.children().removeClass("active");
	        pager.children().eq(page+1).addClass("active");
	    
	    }
	};

	$(document).ready(function(){
	    
	  $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:10});
	    
	});
	
	var viewDetail = function(id_Topico, id_foro) {
		
		$.ajax({
			url : 'loadTopic', // action to be perform 
			type : 'POST',
			data : {
				id : id_Topico,
				idForo : id_foro
			
			},
			dataType : 'html',
			success : function(html) {
				$('#contenidoInformacion').html(html);
			},
			error : function(xhr, ajaxOptions, thrownError) {
				alert('An error occurred! ' + thrownError);
			},
		});
	 };
	
	</script>
<title>Main ho</title>
</head>
<body>

<%-- 	<s:div cssClass="contenidoAzul"> --%>
<%-- 		<jsp:include page="/jsp/encabezado.jsp" flush="true" /> --%>
<%-- 		<s:div cssClass="divBlanco"></s:div> --%>
<%-- 		<s:div cssClass="contenidoFormLogin"></s:div> --%>
<%-- 	</s:div> --%>


		<div class="container">
			<div class="row">
				<div class="table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th>#</th>
								<th>Topic</th>
								<th>Description</th>
								<th>latest post</th>
								<th>Option</th>

							</tr>
						</thead>
						<tbody id="myTable">

							<s:iterator value="listaTopics">
								<tr>
									<td><s:property value="id_topico" /></td>
									<td><s:property value="topico" /></td>
									<td><s:property value="descripcion" /></td>
									<td><s:property value="last_date" /></td>
									<td> 
									<button type="submit" id="detailTopic" class="center btn btn-primary" onclick='viewDetail("<s:property value="id_topico" />" ,"<s:property value="idForo" />");'>
										Detail</button>
<%-- 										 <s:a cssClass="buttonTablaAssign" action="loadTopic" > --%>
<!--                                             <input type="button" value="Detail"/> -->
<%--                                             <s:param name="id" value="id_topico"></s:param> --%>
<%--                                         </s:a> --%>
									</td>

								</tr>
							</s:iterator>

						</tbody>
					</table>
				</div>
				<div class="col-md-12 text-center">
					<ul class="pagination pagination-lg pager" id="myPager"></ul>
				</div>
			</div>
		</div>






</body>
</html>
